<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="./common/header.jsp"/>
<link rel="stylesheet" type="text/css" href="static/webuploader/webuploader.css">
<script type="text/javascript" src="static/webuploader/webuploader.js"></script>
<body>
<div class="container">
    <div id="uploader" class="wu-example" style="margin-top:30px">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">上传文件</div>
            <div id="toDownload" class="btn btn-default" style="margin: 20px 0">下载文件</div>
        </div>
    </div>
    <table class="table">
        <thead>
        <tr>
            <th>文件名</th>
            <th>文件大小</th>
            <th>上传时间</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</div>
<script type="text/javascript">

    var $list = $("#thelist");
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: 'static/webuploader/Uploader.swf',

        // 文件接收服务端。
        server: '/upload',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });

    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        $list.append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');

        $percent.css('width', percentage * 100 + '%');
    });

    uploader.on('uploadSuccess', function (file) {
        $('#' + file.id).find('p.state').text('已上传');
    });

    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').fadeOut();
        doSearch();
    });
    var doSearch = function () {
        $.ajax({
            type: "GET",
            url: "/files",
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    var list = data.result;
                    var listContent = "";
                    for (var i in list) {
                        listContent += '<tr>';
                        listContent += '<td>' + list[i].fileName + '</td>';
                        listContent += '<td>' + bytesToSize(list[i].fileSize) + '</td>';
                        listContent += '<td>' + timeStamp2String(list[i].createdTime) + '</td>';
                        listContent +='</tr>';
                    }
                    $("#tbody").html(listContent);

                }
            },
            error: function () {
            }
        });
    }
    $(document).ready(function () {
        doSearch();
    });
    function timeStamp2String (time){
        var datetime = new Date();
        datetime.setTime(time);
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1;
        var date = datetime.getDate();
        var hour = datetime.getHours();
        var minute = datetime.getMinutes();
        var second = datetime.getSeconds();
        var mseconds = datetime.getMilliseconds();
        return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second+"."+mseconds;
    }
    function bytesToSize(bytes) {
        if (bytes === 0) return '0 B';

        var k = 1024;

        sizes = ['B','KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

        i = Math.floor(Math.log(bytes) / Math.log(k));

        return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
    }
    $("#toDownload").bind("click",function () {
        window.location.href="/download";
    })
</script>
</body>
</html>

